<template>
  <div class="form-bgimg cl">
    <el-col class="" :span="16">
      <el-button @click="clearBgImg">清除背景图片</el-button>
      <el-upload
      class="form-upload"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-change="handleChange"
      
      >
        <el-button>上传背景图片</el-button>
      </el-upload>
      <div :style="{backgroundImage:'url('+backgrounImg+')'}" class="form-view">
        <fieldset disabled>
          <div class="form-cont">
            <h3 class="form-title">{{formObj.title}}</h3>
            <div v-for="item, index in formHtmlMap" 
              :class="{
                'cont-item': true, 
                'cont-item-m0': formObj.node.style.lineHeight==='小',
                'cont-item-m5': formObj.node.style.lineHeight==='中',
                'cont-item-m10': formObj.node.style.lineHeight==='大'
              }" >
              <label class="cont-item-label" for="">{{item.name}} <span v-if="item.required" class="cont-item-required">*</span></label>
              <!-- <p class="cont-item-desc" v-if="item.desc!=''">{{item.desc}}</p> -->
              <input v-if="item.type=='text'" type="text" class="cont-item-ipt">
              <textarea v-else-if="item.type=='textarea'" class="cont-item-ipt"></textarea>
              <select v-else-if="item.type=='select'" class="cont-item-select">
                <option v-for="key in item.options" :value="key.val">{{key.label}}</option>
              </select>
              <div v-else-if="item.type=='radio'">
                <p v-for="key in item.options" class="cont-item-radio">
                  <label :for="index">
                    <input type="radio" :value="key.val" :name="index">
                    {{key.label}}
                  </label>
                </p>
              </div>
              <div v-else-if="item.type=='checkbox'">
                <p v-for="key in item.options" class="cont-item-radio">
                  <label :for="index">
                    <input type="checkbox" :value="key.val" :name="index">
                    {{key.label}}
                  </label>
                </p>
              </div>
              <div v-else="item.type=='upload'">
                <input type="file" value="" name="">
              </div>
            </div>
            <div :style="{textAlign: formObj.node.style.layout==1?'left':formObj.node.style.layout==2?'center':'right'}" v-show="formObj.node.buttonText">
              <button class="form-btn">{{formObj.node.buttonText}}</button>
            </div>
          </div>
        </fieldset>
      </div>
    </el-col>
    <el-col class="form-bgimg-board" :span="8">
      <h3>使用模板图片：</h3>
    </el-col>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  export default {
    data () {
      return {
        backgrounImg: 'http://www.taopic.com/uploads/allimg/140107/234764-14010F0310582.jpg',
        fileList: []
      }
    },
    mounted () {},
    props: ['formObj'],
    computed: {
      ...mapState({
        formHtmlMap: state => state.contentManage.formHtmlMap
      })
    },
    methods: {
      clearBgImg () {
        this.backgrounImg = ''
      },
      handleChange (file) {
        console.log(file)
      }
    }
  }
</script>
<style lang="scss">
  .form {
    &-bgimg{
      margin-bottom: 30px;
    }
    &-view{
      background-color: #f1f1f1;
      padding: 50px 10%;
      margin-top: 10px;
      background-size: cover;
    }
    &-upload{
      display: inline-block;
      .el-upload-list{
        display: none;
      }
    }
    &-cont{
      border: 1px solid #eee;
      background-color: rgba(255,255,255,.9);
      border-radius: 5px;
      box-shadow: 0px 1px 5px #ddd;
      padding: 25px 5%;
      width: 90%;
    }
    &-title{
      text-align: center;
      font-size: 18px;
    }
  }
</style>
